<template>
	<!-- vue content -->
	<view class="ver">
		<image :src="src" :mode="mode" class="match-width" style="background-repeat: no-repeat"
			:style="{height:height,width:width,'border-radius': corner+'rpx'}" @load="onSuccess"
			@error="onErrorCallBack" v-show="loadingStatus==10" @click="onClcik">
		</image>
		<view class="bg-common ver ver-center hor-center font-color-main font12" @click="onClcik"
			style="background-repeat: no-repeat"
			:style="{'line-height':height,width:width,'border-radius': corner+'rpx'}" v-show="loadingStatus==0">
			<view :style="{'line-height':height,width:width,'border-radius': corner+'rpx'}" class="text-center">加载中</view>
		</view>
		<view class="bg-common ver ver-center hor-center font-color-main font12" @click="onClcik"
			style="background-repeat: no-repeat" :style="{'height':height,width:width,'border-radius': corner+'rpx'}"
			v-show="loadingStatus==1">
			<view :style="{width:width,'border-radius': corner+'rpx'}" class="text-center pd-lr15 line2">{{emptyHint}}</view>
		</view>
	</view>

</template>
<script>
	let _this;
	export default {
		name: "imageCommon",
		//属性
		props: {
			// 属性名称: {
			// 	type: String, //属性类型
			// 	value: "值"
			// },
			// ......
			// 待渲染的数据
			src: { //每行的个数
				type: String,
				default: ""
			},
			mode: { //
				type: String,
				default: "aspectFill"
			},
			width: { //
				type: String,
				default: "0px"
			},
			height: { //
				type: String,
				default: "0px"
			},
			emptyHint: { //
				type: String,
				default: "哇喔，图片走丢啦!别着急尝试刷新一下"
			},
			corner: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				loadingStatus: 0, //0加载中 1.加载失败 10.加载成功 
			}
		},
		//组件生命周期
		created: function(e) {},
		// watch: {
		// 	src(e) {
		// 		this.loadingStatus = 0
		// 	}
		// },
		methods: {
			onSuccess() {
				this.loadingStatus = 10
			},
			onErrorCallBack() {
				this.loadingStatus = 1
			},
			onClcik() {
				this.$emit("click")
			}
		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #F8F8F8;
	}

	.bg-header {
		background: linear-gradient(180deg, #db6a6b, #F8F8F8 90%);
	}

	.bg-greed-button {
		background: linear-gradient(90deg, #56e200, #5df400);
	}
</style>